机台管理/机台查询

<template>
    <div class="app-container calendar-list-container">
    <!-- filter 条件查询 -->
    <div class="filter-container">
      <el-input
            clearable
            v-model.trim="listQuery.sectionNo"
            :style="searchInputStyle"
            class="filter-item"
            placeholder="请输入工段编号"
      ></el-input>
      <el-input
            clearable
            v-model.trim="listQuery.machineId"
            :style="searchInputStyle"
            class="filter-item"
            placeholder="请输入机台号码"  
      ></el-input>
      <el-select clearable v-model.trim="listQuery.department" placeholder="请选择部门" @focus="getDepartInfo" :style="searchInputStyle" class="filter-item">
          <el-option :value="item" :label="item" v-for="(item,index) in this.departList" :key="index"/>
        </el-select>
      <el-button class="filter-item" type="primary" v-waves icon="el-icon-search" @click="handleFilter">搜索</el-button>
    </div>

    <!-- table 表格 -->
    <el-table  :data="tableInfo" v-loading="loadingList" element-loading-text="给我一首歌的时间" stripe border fit highlight-current-row style="width: 100%">
      <el-table-column  label="序号" type="index" align="center" width="80px"/>
      <el-table-column label="机台名称"  prop="machineName"   align="center"/>
      <el-table-column label="机台类型"  prop="machineType"   align="center"/>
      <el-table-column label="机台编号"  prop="machineId"   align="center"/>
      <el-table-column  label="部门" prop='department' align="center" width="100px"/>
      <el-table-column  label="职级" prop='jobClass' align="center"/>
      <el-table-column  label="工段编号" prop='sectionNo' align="center"/>
      <el-table-column  label="最大人数限制" prop='qualityMax' align="center"/>
      <!-- 对员工数据进行编辑与删除操作 -->
      <el-table-column  label="操作"  align="center" width="230"  v-if="userInfo.roleId == 14">
        <template slot-scope="scope" >
              <el-button size="mini" type="primary" @click="handleEdit(scope.row)">修改</el-button>
              <el-button size="mini" type="danger" @click="handleDelete(scope.$index,scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

   <!-- pagination 分页 -->
    <div class="pagination-container">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="listQuery.page"
        :page-sizes="[5,10, 20, 30, 40, 100, 300, 500]"
        :page-size="listQuery.limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>

        <!-- 修改工段信息弹出表单 -->
    <el-dialog title="机台信息修改" :visible.sync="dialogFormVisible" width="700px">
    <el-form :model="modifyform">
      <el-form-item label="工段编号" :label-width="formLabelWidth">
        <el-input v-model="modifyform.sectionNo" style="width:400px" disabled/>
      </el-form-item>
      <el-form-item label="机器编号" :label-width="formLabelWidth">
        <el-input v-model="modifyform.machineId" :disabled="true" style="width:400px" />
      </el-form-item>
      <el-form-item label="机器名称" :label-width="formLabelWidth">
        <el-input v-model="modifyform.machineName" style="width:400px" />
      </el-form-item>
      <el-form-item label="机台类型" :label-width="formLabelWidth">
        <el-select v-model="modifyform.machineType" placeholder="请选择机台类型" style="width:400px">
          <el-option :value="item" :label="item" v-for="(item,index) in this.belongList" :key="index"/>
        </el-select>
      </el-form-item>
      <el-form-item label="操作职级" :label-width="formLabelWidth">
        <el-cascader collapse-tags :props="props" v-model="modifyform.jobClass" separator="-" :options="options" clearable style="width:400px"/>
      </el-form-item>
      <el-form-item label="最大人数限制" prop="qualityMax" >
        <el-input-number size="mini" v-model="modifyform.qualityMax" :min="0" :max="5" ></el-input-number>
      </el-form-item>
      <!-- <el-form-item label="是否多人绑定" :label-width="formLabelWidth" v-else>
        <el-switch v-model="modifyform.isMore" active-value="1" inactive-value="0" active-text="是" inactive-text="否" />
      </el-form-item> -->
      <!-- <el-form-item label="操作职级" :label-width="formLabelWidth">
        <el-input v-model="modifyform.jobClass" style="width:400px" />
      </el-form-item> -->
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogFormVisible = false">取 消</el-button>
      <el-button type="primary" @click="modifyMachine">确 定</el-button>
    </div>
    </el-dialog>

  </div>
</template>

<script>
import { machinePage, updateMachine, deleteMachine } from '../../api/machine'
import { getDepartList } from '@/api/user'
export default {
    name: 'check_Machine',
    data () {
        return {
          departList: [],         // 部门列表
            listQuery: {
                sectionNo: '',                              //工段编号
                machineId: '',                              //机台号
                department:'',
                page: 1,                                    //页码
                limit: 10                                   //每页多少条记录
            },
            modifyform: {
                sectionNo: '',                              //工段编号
                machineId: '',                              //机台号
                machineName: '',                            //机台名
                jobClass: '',                                //职级
                machineType: '',                           //机台类型
                isMore: 0,                                 //是否多人绑定
                qualityMax:''                              // 最大人数限制
            },
            formLabelWidth: '100px',
            searchInputStyle: 'width: 150px;margin-right:15px;',
            total: 0,                                      //数据的总数
            tableInfo: [],
            dialogFormVisible: false,
            options: [{
                value: 'O1',
                label: 'O1',
                children: [{
                value: '1',
                label: '1'
                }, {
                value: '2',
                label: '2'
                }, {
                value: '3',
                label: '3'
                }, {
                value: '4',
                label: '4'
                }, {
                value: '5',
                label: '5'
                }]
            }, {
                value: 'O2',
                label: 'O2',
                children: [{
                value: '1',
                label: '1'
                }, {
                value: '2',
                label: '2'
                }, {
                value: '3',
                label: '3'
                }, {
                value: '4',
                label: '4'
                }, {
                value: '5',
                label: '5'
                }]
            }, {
                value: 'O3',
                label: 'O3',
                children: [{
                value: '1',
                label: '1'
                }, {
                value: '2',
                label: '2'
                }, {
                value: '3',
                label: '3'
                }, {
                value: '4',
                label: '4'
                }, {
                value: '5',
                label: '5'
                }]
            },  {
                value: 'O4',
                label: 'O4',
                children: [{
                value: '1',
                label: '1'
                }, {
                value: '2',
                label: '2'
                }, {
                value: '3',
                label: '3'
                }, {
                value: '4',
                label: '4'
                }, {
                value: '5',
                label: '5'
                }]
            }, {
                value: 'O5',
                label: 'O5',
                children: [{
                value: '1',
                label: '1'
                }, {
                value: '2',
                label: '2'
                }, {
                value: '3',
                label: '3'
                }, {
                value: '4',
                label: '4'
                }, {
                value: '5',
                label: '5'
                }]
            }],
            belongList:['装配','数冲','折弯','钳铆','人工焊组','机器人组','打磨组','喷涂一线','喷涂二线','喷涂三线','喷涂样品线','走芯机','CNC','其他'],
            loadingList: false,
            props: { multiple: true },
            userInfo: this.$store.state.user.userInfo,
        }
    },
    methods: {
      // 获取部门函数
    async getDepartInfo() {
        let {data} = await getDepartList()
        this.departList = data
    },
        async handleFilter() {
            this.loadingList = true
            let query = Object.assign({},this.listQuery)
            let {data} = await machinePage(query)
            this.total = data.total
            this.tableInfo = data.records
            this.loadingList = false
        },
        handleEdit(item) {
            this.modifyform = Object.assign({},item)
            console.log(this.modifyform);
            if(item.jobClass.indexOf(',')){
              this.modifyform.jobClass = []
              let array = []
              array = item.jobClass.split(',')
              array.forEach(item => {
                this.modifyform.jobClass.push(item.split('-'))
              })
            }
            this.modifyform.isMore = item.isMore.toString()
            this.dialogFormVisible = true
        },
        // 删除用户按钮,使用elementui的messageBox弹框组件
        handleDelete(index,row) {
            this.$confirm('这将会永久删除该行数据，是否继续?', '警告', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(async () => {
                let res = await deleteMachine({machineId: row.machineId})
                this.dealList.splice(index, 1)
                this.$message({
                type: 'success',
                message: '已取消删除'
            })
            }).catch(() => {
                this.$message({
                type: 'info',
                message: '删除成功'
            })
            this.handleFilter()
          })
        },
        // 将弹框修改后的工段信息传入后台，并且消息提示是否修改成功
        async modifyMachine() {
            this.dialogFormVisible = false
            let query = Object.assign({},this.modifyform)
            console.log(query);
            if(this.modifyform.jobClass.length) {
              let array = []
              this.modifyform.jobClass.forEach(item => {
                  array.push(item.join('-'))
              });
              query.jobClass = array.join(',')
            }
            if(query.qualityMax > 1){
              query.isMore = 1
            } else {
              query.isMore = 0
            }
            // if(this.modifyform.machineType == '喷涂一线' || this.modifyform.machineType == '喷涂二线' || this.modifyform.machineType == '喷涂三线' || this.modifyform.machineType == '喷涂样品线') {
            //   delete query.isMore
            // } else {  delete query.qualityMax }
            const data = await updateMachine(query)
            if(data.code == '1'){
                this.$message({
                  message: '修改成功',
                  type: 'success'
              })
              this.handleFilter()
            } else {
              this.$message({
                  message: '修改失败',
                  type: 'warning'
              })
          }
        },
        // table表单下方的页码组件改变每页显示的数据条数
        handleSizeChange(val) {
			this.listQuery.limit = val
			this.handleFilter()
        },
        // table表单下方的页码组件改变页面
        handleCurrentChange(val) {
			this.listQuery.page = val
			this.handleFilter()
        }
    },
    // 进入页面获取table信息
    mounted() {
        this.handleFilter()
    }
}
</script>

<style>

</style>
